<template>
  <div class="management-enum-wraper" v-loading="batchEditLoading">
    <!-- toolbar -->
    <div class="management-enum-toolbar">
      <!-- toolbar底部 -->
      <slot name="toolbar-bottom">
        <div class="management-enum-toolbar-bottom">
          <slot name="toolbar-left">
            <div class="management-enum-toolbar-left" v-if="buttonLeftConfigs.length">
              <component
                v-for="button in buttonLeftConfigs"
                :is="getComponent(button.type)"
                :key="button.command + button.modelVal"
                :style="button.style || ''"
                :options="button.options"
                v-model="button.modelVal"
                @click="doCommond(button.command)"
              />
            </div>
          </slot>
          <slot name="toolbar-right">
            <div style="display: flex; align-items: center">
              <ty-common-search
                @search="handleSearch(keyword)"
                @clear="handleSearch(keyword)"
                v-model="keyword"
              ></ty-common-search>
              <ty-plm-button
                style="margin-left: 8px"
                class="toolbar-right-refresh"
                @click="handleRefresh"
                :options="{ type: 'icon', iconClass: 'iconfont font-14 icon-shuaxin' }"
              ></ty-plm-button>
            </div>
          </slot>
        </div>
      </slot>
    </div>
    <div class="management-enum-grid">
      <management-enum-table
        :currentEnumRow="currentEnumRow"
        ref="managementEnumTableRef"
        @selectChangeEvent="selectChangeEvent"
        @setBatchEditLoading="setBatchEditLoading"
      ></management-enum-table>
    </div>
    <!-- excel粘贴 -->
    <excelPasteDialog
      v-model="formulaDialogShow"
      :isSelectRow="isSelectRow"
      :defaultColumnList="canEditColumnsGiveExcel.value"
      @onConfirm="onExcelConfirm"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import core from '@common/core';
import basic from '@common/basic';

//const coreTools = core.getExportResource('/utils/core-tools.js');
const coreTools = core.getExportResource('src/core/utils/core-tools.js').default;
// import excelPasteDialog from '@/basic/components/excel-paste/excel-paste-dialog.vue';
const excelPasteDialog = basic.getExportResource('src/basic/components/excel-paste/excel-paste-dialog.vue').default;

// import managementEnumTable from './management-enum-table.vue';
const managementEnumTable = tyRoot.getExportResource('src/modules/backend-mrg/business-module/enum-management/views/components/management-enum-table.vue').default;

// import { getLeftButtonConfigs, componentOptions } from '../../config/index.js';
const { getLeftButtonConfigs } = window.tyRoot.getExportResource(
  'src/modules/backend-mrg/business-module/enum-management/config/index.js'
);
const { componentOptions } = window.tyRoot.getExportResource(
  'src/modules/backend-mrg/business-module/enum-management/config/index.js'
);
const originLeftButtonList = getLeftButtonConfigs();

const props = defineProps({
  currentEnumRow: {
    type: Object,
    default: null
  }
});

const managementEnumTableRef = ref(null);
const batchEditLoading = ref(true);
const isSelectRow = ref(false);
const formulaDialogShow = ref(false);
const keyword = ref('');
const { proxy } = getCurrentInstance();

 const buttonLeftConfigs = ref(coreTools.deepClone(originLeftButtonList)); // toolbar左侧操作配置
// excel粘贴传入的可配置列
const canEditColumnsGiveExcel = ref({});
onMounted(() => {
  buttonLeftConfigs.value[0].modelVal = 1 ;
  
  canEditColumnsGiveExcel.value = computed(() => {
    let arr = managementEnumTableRef.value.tableColumns.filter(item => item.editRender || item.field == 'internalName');
    let editColumn = [];
    arr.forEach(data => {
      editColumn.push({
        field: data.field,
        title: data.title,
        name: data.title
      });
    });
    return editColumn;
  });
});
function setBatchEditLoading(val) {
  batchEditLoading.value = val;
}
function handleRefresh() {
  proxy.$tyPlmConfirm({
    type: 'warning',
    title: proxy.$t('label.sureToRefresh'),
    message: proxy.$t('message.sureToRefresh'),
    confirmButtonText: proxy.$t('btn.ok'),
    cancelButtonText: proxy.$t('btn.cancel'),
    beforeClose: action => {
      if (action === 'confirm') {
        batchEditLoading.value = true;
        managementEnumTableRef.value.getTableList();
        keyword.value = '';
      }
    }
  });
}
function selectChangeEvent(val) {
  buttonLeftConfigs.value[3].options.disabled = !val.length;
  buttonLeftConfigs.value[4].options.disabled = !val.length;
}
const commondsMap = {
  /**
   * @description 添加
   * @author daif
   * @Date 2024-07-08 10:06:25
   */
  onBtnAdd: () => {
    const inputNum = buttonLeftConfigs.value.find(item => item.command === 'onInputNum').modelVal;
    managementEnumTableRef.value.batchToAdd(inputNum);
  },
  /**
   * @description 粘贴
   * @author daif
   * @Date 2024-07-08 10:06:25
   */
  onExcelPaste: () => {
    if (managementEnumTableRef.value.baseTableRef.tyPlmGridRef.grid.getCurrentRecord()) {
      isSelectRow.value = true;
    }
    formulaDialogShow.value = true;
  },
  /**
   * @description 删除
   * @author daif
   * @Date 2024-07-08 10:06:25
   */
  onBtnDelete: () => {
    handleCommonBatchDeleteRow();
  },
  /**
   * @description 恢复
   * @author daif
   * @Date 2024-07-08 10:06:25
   */
  onBtnRecover: () => {
    handleRowRecover();
  },
  /**
   * @description 英文列勾选
   * @author daif
   * @Date 2024-07-08 10:06:25
   */
  onBtnEnLine: () => {
    managementEnumTableRef.value.isChinese(buttonLeftConfigs.value[5].modelVal);
  }
};
/**
 * @description 获取动态组件
 * @param {*} type 组件类型
 * @author daif
 * @Date 2024-07-08 10:06:25
 */
function getComponent(type) {
  return componentOptions[type];
}

/**
 * @description 执行commondsMap定义好的函数
 * @Date 2024-07-08 10:06:25
 * @param {*} command 函数名
 * @param {*} val 参数
 * @author daif
 */
function doCommond(command, val) {
  if (!commondsMap[command]) return;
  // 执行函数
  commondsMap[command](val);
}

/**
 * @description excel粘贴（粘贴行/插入行）
 * @autor daif
 * @Date 2024-06-12 10:06:25
 * @param {*} type 类型
 * @param {*} datas 要粘贴的表格数据
 */
function onExcelConfirm(type, datas) {
  managementEnumTableRef.value.handleInsertCopyRow(datas, type);
}
/**
 * @description 恢复行
 * @autor daif
 * @param {*} row 行
 */
function handleRowRecover() {
  let deleteList = managementEnumTableRef.value.baseTableRef.tyPlmGridRef.grid.getCheckboxRecords();
  let list = managementEnumTableRef.value.gridOptions.data;
  const listIndex = deleteList.map(data => data.oid);
  list.forEach(data => {
    if (listIndex.indexOf(data.oid) != -1) {
      if (data.flagAdd) {
        data.iconStatus = 'add';
      } else {
        data.iconStatus = 'edit';
      }
    }
  });
  managementEnumTableRef.value.metaData.forEach(data => {
    if (listIndex.indexOf(data.oid) != -1) {
      if (data.flagAdd) {
        data.iconStatus = 'add';
      } else {
        data.iconStatus = 'edit';
      }
    }
  });
  managementEnumTableRef.value.baseTableRef.tyPlmGridRef.grid.clearCheckboxRow();
}

/**
 * @description 删除行内数据
 * @autor daif
 * @param {*} row 行
 */
function handleCommonBatchDeleteRow() {
  let deleteList = managementEnumTableRef.value.baseTableRef.tyPlmGridRef.grid.getCheckboxRecords();
  let list = managementEnumTableRef.value.gridOptions.data;
  const listIndex = deleteList.map(data => data.oid);
  list.forEach(data => {
    if (listIndex.indexOf(data.oid) != -1) {
      data.iconStatus = 'delet';
    }
  });
  managementEnumTableRef.value.metaData.forEach(data => {
    if (listIndex.indexOf(data.oid) != -1) {
      data.iconStatus = 'delet';
    }
  });

  deleteList.forEach(data => {
    if (data.isAddStatus) {
      managementEnumTableRef.value.gridOptions.data.splice(
        managementEnumTableRef.value.gridOptions.data.indexOf(data),
        1
      );
      managementEnumTableRef.value.metaData.splice(managementEnumTableRef.value.metaData.indexOf(data), 1);
    }
  });
  managementEnumTableRef.value.baseTableRef.tyPlmGridRef.grid.clearCheckboxRow();
}

/**
 * @description 表格的搜索
 * @autor weig
 * @param {*} row 行
 */
const handleSearch = keyword => {
  managementEnumTableRef.value.handleSearch(keyword);
};
defineExpose({ buttonLeftConfigs, managementEnumTableRef });
</script>

<style lang="scss" scoped>
.management-enum-wraper {
  position: relative;
  height: 450px;
  .management-enum-toolbar {
    .management-enum-toolbar-top {
      margin-bottom: 12px;
    }
    .management-enum-toolbar-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      .management-enum-toolbar-left {
        display: flex;
        align-items: center;
        ::v-deep .input-num--class {
          .el-input__inner {
            padding-right: 10px !important;
          }
        }
      }
      .management-enum-toolbar-right {
        ::v-deep .el-button {
          width: 32px;
          em {
            color: #000;
          }
        }
        ::v-deep .el-button + .el-button {
          margin-left: 8px !important;
        }
      }
    }
  }
  // modify by fengc 2024/8/22 表格高度调整
  .management-enum-grid {
    height: calc(100% - 44px);

    // modify by fengc 2024/8/22 拖拽Icon样式调整
    .code-segment-drag {
      position: relative;
      cursor: grab;
      color: black;
      font-size: 14px;
    }
    .left-top-required-rule--tips {
      color: #dd3730;
      height: 30px;
      line-height: normal;
    }
    .rule-msg-wraper {
      position: absolute;
      left: 1px;
      top: -3px;
    }
    .show-num--class {
      position: relative;
      width: 100%;
      .show-btn {
        position: absolute;
        opacity: 0;
        display: flex;
        ::v-deep .icon-a-1-zuidahua {
          cursor: pointer;
        }
        ::v-deep .el-icon--right {
          display: none;
        }
        ::v-deep .el-dropdown {
          margin-top: 5px;
        }
      }
      .show-order {
        position: absolute;
        display: block;
      }
      &:hover {
        .show-btn {
          opacity: 1;
        }
        .show-order {
          display: none;
        }
      }
    }
    .default-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: calc(100% - 1px);
      padding: 0 8px;
      box-sizing: border-box;
    }

    .status-icon {
      color: black;

      .iconfont {
        font-size: 14px;
      }
    }

    .chexkbox-header {
      position: absolute;
      top: 0px;
      left: 9px;
      ::v-deep .el-checkbox__label {
        padding-left: 2px !important;
      }
    }

    .show-delete-line {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background: #d9d9d9;
    }

    ::v-deep .vxe-cell {
      height: 32px;
      line-height: 30px;
      width: 100% !important;
    }
    ::v-deep .vxe-header--row {
      .vxe-header--column {
        .vxe-cell:nth-child(1) {
          position: relative;
          height: 100%;
        }
      }
    }
    ::v-deep .vxe-cell {
      max-height: fit-content !important;
    }
    ::v-deep .input-num--class {
      .el-input__inner {
        height: 28px !important;
      }
    }
    ::v-deep .vxe-icon-edit {
      display: none;
    }
    .attr-rules-icon-position--msg {
      font-size: 6px;
      color: #dd3730;
      width: 20px;
      height: 30px;
      line-height: normal;
      text-align: center;
    }
    .position-msg-wraper {
      position: absolute;
      right: 2px;
      top: -5px;
    }
  }
}

::v-deep .ty-plm-color {
  height: 32px;
}
</style>
<style lang="scss">
.container-craft-opts-popover {
  // modify by fengc 2024/8/22 浮层宽度调整
  width: 166px;
  margin-top: -10px;
  .dropdown-item-label {
    display: flex;
    align-items: center;
  }
  .el-popper__arrow {
    display: none;
  }
  .el-input-number {
    line-height: 20px;
    height: 20px;
    width: 40px !important;
  }
  .el-dropdown-menu__item {
    position: relative;
    padding: 5px 12px;
  }
  .split-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(50% - 69px);
    width: 138px;
    height: 1px;
    background: #e7eaec;
  }
}
.enum-edit-tooltip {
  width: 0 !important;
}
</style>
